<template>
	<div>
		<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
			<!-- <el-table-column type="selection" width="34" /> -->
			<el-table-column label="序号" prop="id" width="50" />
			<el-table-column prop="dishesName" label="菜品名称" width="120" />
			<el-table-column label="菜品图片" width="100" prop="dishesPhotoOrVideoUrl">
				<!-- <img :src="tableData.dishesPhotoOrVideoUrl"/> -->
				<template #default="scope">
					<el-image style="width:5em;height:5em;" :src="scope.row.dishesPhotoOrVideoUrl"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="title" label="标题" />
			<el-table-column prop="sales" label="销量" width="60" />
			<el-table-column prop="shopkeeperDescription" label="掌柜描述" />
			<el-table-column prop="mainIngredient" label="主要原料" width="100" />
			<el-table-column prop="price" label="价格" width="50" />
			<el-table-column prop="startingPrice" label="起送价格" width="80" />
			<el-table-column align="right">
				<template #header>
					<el-input v-model="search" size="small" placeholder="搜索分类" />
				</template>
				<template #default="scope">
					<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button v-if="scope.row.isDeleted == 0" size="small" type="danger"
						@click="handleDelete(scope.row)">删除
					</el-button>
					<el-button v-else size="small" type="primary" @click="handleDelete(scope.row)">启用
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div><br />
			<!-- 分页 -->
			<el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :small="small"
				:disabled="disabled" background layout="prev, pager, next, jumper" :total="total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</div>

	</div>
</template>
<script>
	// import storage from '@/utils/localstorage'
	import qs from 'qs'
	export default {
		name: "DishesList",
		data() {
			return {
				tableData: [],
				currentPage: 1,
				pageSize: 5,
				total: 0
			}
		},
		mounted() { //挂载之后执行的方法
			this.getPage();
		},
		methods: {
			getPage() {
				this.$axios.get('/dishes/page/0', {
						params: {
							pageNum: this.currentPage
						}
					})
					.then(res => {
						// console.log("data=" + res)
						this.tableData = res.data.records;
						console.log("res.data.current=" + res.data.current);
						this.currentPage = res.data.current;
						this.total = res.data.total;
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			handleCurrentChange() {
				this.$axios.get('/dishes/page/0', {
						params: {
							pageNum: this.currentPage
						}
					})
					.then(res => {
						// console.log("data=" + res)
						this.tableData = res.data.records;
						console.log("res.data.current=" + res.data.current);
						// this.currentPage = res.data.current;
						this.total = res.data.total;
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			//逻辑删除菜品
			handleDelete(row) {
				console.log("row.id=" + row.id)
				if (row.isDeleted == 1) { //启用
					this.$axios.put('/dishes/update/status', qs.stringify(row))
						.then(res => {
							console.log("data=" + res.data);
							if (res.data) {
								this.$message({
									message: "修改成功",
									type: 'success'
								})
								window.location.reload();
							} else {
								this.$message({
									message: "修改失败",
									type: 'warning'
								})
							}
						}).catch(e => {
							console.log(e);
						})
				} else { //逻辑删除
					this.$axios.delete('/dishes/delete', {
							params: {
								"id": row.id
							}
						})
						.then(res => {
							console.log("data=" + res.data);
							if (res.data) {
								this.$message({
									message: "删除成功",
									type: 'success'
								})
								window.location.reload();
							} else {
								this.$message({
									message: "删除失败",
									type: 'warning'
								})
							}
						}).catch(e => {
							console.log(e);
						})
				}

			}
		}
	}
</script>

<style scoped>
	/* ul>li {
		float: left;
		list-style: none;
	}

	.image {
		display: inline-block;
		width: 200px;
	}

	.blind-box-container {
		border: silver solid 2px;
		border-radius: 5px;
		width: 800px;
		height: 440px;
	}

	.title {
		display: inline-block;
	}

	.demo-image {
		display: flex;
		justify-content: center;
		flex-direction: row-reverse;
	}

	.oneGrid-b {
		margin-right: 68px;

	} */

	/* #threeGrid {
		margin-left: 68px;
	} */
</style>
